<{extend name="base" /}>
    <{block name="body" }>
        <div class="layui-body ">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="">
                        <a href="<{:url('admin/sm/index')}>">已添加列表</a>
                    </li>
                    <li>
                        <a href="<{:url('admin/sm/create',['style_id'=>1])}>">样式一</a>
                    </li>
                    <li>
                        <a href="<{:url('admin/sm/create',['style_id'=>2])}>">样式二</a>
                    </li>
                    <li >
                        <a href="<{:url('admin/sm/create',['style_id'=>3])}>">样式三</a>
                    </li>
                    <li class="layui-this">
                        <a>样式四</a>
                    </li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show" id="app">
                        <div class="left">
                            <form class="layui-form" method="post" action="<{:url('admin/sm/save')}>">
                                <input type="hidden" name="style" value="4">
                                <{php}>
                                if(request()->action() == 'edit'){
                                    echo '<input type="hidden" name="type" value="edit">';
                                    echo '<input type="hidden" name="id" value="'.request()->get('id').'">';
                                }
                                <{/php}>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">标题</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="content[title]" lay-verify="required" v-model='title' placeholder="{用此符号可飘红，支持多个} 必须成对书写" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">电话</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="content[tel]" v-model="tel" lay-verify="required" placeholder="例如：001-8888888" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="right" id="sm-search">
                            <link rel="stylesheet" href="/sm/css/style.css" />
                            <div  class="sc Sc_Tool_Customer_phone" >
                                <a :href="Ctel" class="y-link" >
                                    <div class="y-header-3 y-padding-lg dark">
                                        <div class="y-flex">
                                            <p class="y-flex-1 y-header-3-title y-line-clamp-2" v-html="Ctitle"></p>
                                        </div>
                                        <div class="y-header-3-subtitle y-flex">
                                            <i class="icon-tag"></i>
                                            <p class="y-inline-clamp">以下电话经安全认证</p>
                                        </div>
                                    </div>
                                </a>
                                <ul class="p-list">
                                    <li class="p-item ">
                                        <a :href="Ctel"  class="y-flex y-flex-center-y y-padding-lg">
                                            <div class="p-content y-flex-1">
                                                <p class="p-title y-inline-clamp" v-html="Dtel"></p>
                                                <p class="p-subtitle">官方电话</p>
                                            </div>
                                            <div class="y-e-button-wrap">
                                                <svg class="y-e-button-icon">
                                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base/icon-telephone">
                                                    <svg id="base/icon-telephone" viewBox="0 0 24 24" width="100%" height="100%"><path d="M5.344 7.59c-1.538 1.542-.878 4.705 1.474 7.065l2.332 2.338c2.352 2.36 5.506 3.02 7.044 1.478 0 0 1.23-1.052 1.89-1.895.23-.29.866-.283 1.535-.02 1.312.515 3.18 2.113 4.073 2.92.57.515.25.788-.19 1.498-.322.52-.903.996-1.448 1.416-4.026 3.1-10.505 1.577-15.295-3.297-.022-.016-.043-.03-.064-.048-6.278-4.89-8.545-12.502-5.06-17C2.172 1.35 2.848.63 3.43.27c.41-.253.54-.545 1.19.236.77.924 2.144 2.636 2.71 3.756.04.076.34 1.017.02 1.314-.773.727-2.006 2.014-2.006 2.014"></path></svg>
                                                    </use>
                                                </svg>
                                                <p class="y-e-button-title">拨打</p>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <{/block}>
            <{block name="script" }>
                <style type="text/css">
                    .left,
                    .right {
                        float: left;
                    }

                    .left {
                        width: 60%;
                    }

                    .right {
                        height: 550px;
                        margin-left: 60px;
                        width: 300px;
                        border: 2px solid #ccc;
                        border-radius: 20px;
                        padding: 20px 13px;
                        background: #f1f1f1;
                        box-shadow: 1px 2px #eeeeee5c;
                        overflow-y: scroll;
                    }

                    .right::-webkit-scrollbar {
                        display: none;
                    }
                </style>
                <script src="/static/js/vue.js"></script>
                <script type="text/javascript">
                    var vue = new Vue({
                        el: "#app",
                        data: {
                            title: '',
                            tel: '',
                        },
                        computed: {
                            Ctitle: function () {
                                if (this.title == '') {
                                    return '中国移动客服电话';
                                }
                                return this.title.replace(/{/g, '<em>').replace(/}/g, '</em>');
                            },
                            Ctel: function () {
                                return 'tel:' + this.tel;
                            },
                            Dtel:function(){
                                if (this.tel == '') {
                                    return '010-8888888';
                                }
                                return this.tel;
                            }
                        }
                    });

                     <{php}>
                        if(request()->action() == 'edit'){

                            echo "vue.title = '".$data['content']['title']."';";
                            echo "vue.tel = '".$data['content']['tel']."';";

                        }
                    <{/php}>
                </script>
                <{/block}>